<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/discount/seckilling.css">
    <title>积分商城</title>
</head>

<body>
    <headers</headers> <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <searchs></searchs>

            <car_box></car_box>

        </div>

        <!-- 商品分类 -->
        <div class="class_box wrap">
            <div class="sub_nav_box">
                <ul class="sub_nav fl">
                    <li class="active">积分商城</li>
                </ul>
            </div>
        </div>

        <!-- 我的积分 -->
        <div class="my_integral wrap">
            <div class="my_img fl">

            </div>
            <div class="my_num fl">
                我的积分 <span class="mynum">{{integral}}</span>
            </div>
            <div class="integral_detail cursor fr" @click='integral_num'>
                积分明细 &gt;
            </div>
        </div>

        <!-- 积分导航 -->
        <div class="nav_integral wrap">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div :class="{active:index===spCategory_num}" v-for='(item,index) in spCategory' @click='spCategory_nav(index,item.id)' class="cursor nav_item swiper-slide">{{item.categoryName}}</div>
                    </div>
                    <!-- Add Pagination -->
                    <!-- <div class="swiper-pagination"></div> -->
                </div>
            <!-- <ul>
                <li :class="{active:index===spCategory_num}" v-for='(item,index) in spCategory' @click='spCategory_nav(index,item.id)'>{{item.categoryName}}</li>
            </ul> -->
        </div>

        <!-- 秒杀列表 -->
        <div class="seckill_box wrap clear_both">
            <div class="seckill_item fl" v-for='(item,index) in seckill_list'>
                <div class="seckill_img cursor" @click='integral_detail(item.id)'>
                    <img :src="item.goodsImage" alt="">
                </div>
                <div class="seckill_text">
                    <p class="integral_tit">{{item.goodsName}}</p>
                    <div class="integral_num">
                        <span class="fl num_detail">{{item.goodsPrice}}</span>
                        <span class="fr integral_people">{{item.soldNum}}人已兑</span>
                    </div>
                    <div class="integral_btn cursor" @click='integral_detail(item.id)'>
                        立即兑换
                    </div>
                </div>
            </div>
        </div>
        <div class="integral_page wrap">
            <el-pagination background @current-change="handleCurrentChange" :page-size="12" :current-page="currentPage"  layout="prev, pager, next" :total="total" class="page_list">
            </el-pagination>
        </div>

       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
        </div>
        
        <script src="../js/axios.js"></script>
        <script src="../js/qs.js"></script>
        <!-- <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script> -->
        <script src="../js/swiper-4.3.5.min.js"></script>
        <script src="../js/browser.min.js"></script>
        <script src="../js/vue.js"></script>
        <script src="../js/element.js"></script>
        <script src="../js/main.js"></script>
        <script type="text/babel">
            var app = new Vue({
            el: '#app',
            data() {
                return {
                    seckill_swiper_btn:true,
                    car_active:false,
                    groups:3,
                    // 分类列表
                    seckill_list:'',
                    // 分类
                    spCategory:'',
                    spCategory_num:0,
                    spCategoryid:'',
                    currentPage:1,
                    total:0,
                    // 积分
                    integral:'',
                };
            },
            created() {
            },
            mounted() {
                this.nav_list()
                this.gMI()
            },
            methods: {
                // 分页
                handleCurrentChange(page) {
                    app.goods_list(app.spCategoryids,page)
                }, //改变条数触发
                handleIndexChange(index) {
                },
                // 分类
                nav_list(){
                    axios({
                        method:"POST",
                        url:base_url + "/spCategory/list",
                        data:Qs.stringify({
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.spCategory = res.data.data.list
                        app.spCategoryids = res.data.data.list[0].id
                        app.goods_list(res.data.data.list[0].id)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                spCategory_nav(index,id){
                    app.spCategory_num = index
                    app.spCategoryids = id
                    app.goods_list(id)
                },
                // 分类列表
                goods_list(id,page){
                    axios({
                        method:"POST",
                        url:base_url + "/spGoods/listMemberUser",
                        data:Qs.stringify({
                            categoryId: id,
                            pageNum:page,
                            pageSize:12,
                            sortField:0,
                            status:1
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res.data.data.list.total)
                        app.seckill_list = res.data.data.list.list
                        app.total = res.data.data.list.total 
                        var swiper = new Swiper('.swiper-container', {
                            slidesPerView: 10,
                            spaceBetween: 0,
                            pagination: {
                                el: '.swiper-pagination',
                                clickable: true,
                            },
                        });

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    
                },
                // 获取用户积分
                
                gMI(){
                    axios({
                        method:"POST",
                        url:base_url + "/user/gMI",
                        data:Qs.stringify({
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.integral = res.data.data.integral
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    
                },


                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                integral_detail(id){
                    window.location.href='integral_detail.html?id='+id
                },
                integral_num(){
                    window.location.href='integral_num.html'
                }
            }
        })
        
    </script>
</body>

</html>